<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>水平分布</title>
	<script src="js/flexible.js"></script>
	<link rel="stylesheet" href="css/common.css">
	<style>
		.flex-start{
			justify-content:flex-start;
		}
		.flex-end{
			justify-content:flex-end;
		}
		.center{
			justify-content:center;
		}
		.space-between{
			justify-content:space-between;
		}
		.space-around{
			justify-content:space-around;
		}
	</style>
</head>
<body>
	<h1>水平分布方式(justify-content)</h1>

	<h2>起始对齐(flex-start)</h2>
	<ul class="container flex-start">
		<li class="first"></li>
		<li class="second"></li>
		<li class="third"></li>
	</ul>

	<h2>居中对齐(center)</h2>
	<ul class="container center">
		<li class="first"></li>
		<li class="second"></li>
		<li class="third"></li>
	</ul>

	<h2>末端对齐(flex-end)</h2>
	<ul class="container flex-end">
		<li class="first"></li>
		<li class="second"></li>
		<li class="third"></li>
	</ul>

	<h2>两端对齐(space-between)</h2>
	<ul class="container space-between">
		<li class="first"></li>
		<li class="second"></li>
		<li class="third"></li>
	</ul>

	<h2>平均分配(space-around)</h2>
	<ul class="container space-around">
		<li class="first"></li>
		<li class="second"></li>
		<li class="third"></li>
	</ul>

	<script src="js/com-nav.js"></script>
	
</body>
</html>